<template>
	<view class="goods-item" @click="toInfo()" :style="{
			width: width,
			marginRight: right + 'px'
		}">
		<image class="goods-img" :src="goods.images" mode="aspectFill" :style="{height: height}"></image>
		<view class="area">
			<view class="f-s-14 u-m-b-20 f-w-b u-line-2">{{goods.name}}</view>
			<up-text align="center" size="22rpx" bold mode="price" :text="goods.salePrice"></up-text>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		width: {
			type: String,
			default: '100%'
		},
		height: {
			type: String,
			default: '200px'
		},
		right: {
			type: Number,
			default: 0
		},
		goods: {
			type: Object,
			default: () => {
				return {}
			}
		}
	})
	const toInfo = () => {
		uni.navigateTo({
			url: `/subPackages/goods/info?id=${props.goods.id}`
		})
	}
</script>

<style lang="scss" scoped>
	.goods-item {
		.goods-img {
			width: 100%;
			background: #F2F3F4;
		}

		.area {
			background-color: #f2f3f4;
			text-align: center;
			padding: 20px 12px;
		}
	}
</style>